<template>
  <div>
    <!--查询-->
    <div :class="$style.operateBtns">
      <div>
        <el-button type="success" @click="exportGoodsPrice" :loading="exporting" size="mini">导出数据</el-button>
        <el-button type="primary" @click="onBatchAudit" size="mini">批量审核</el-button>
      </div>
      <div>
        <el-dropdown type="primary" split-button :hide-on-click="false" size="mini">
          <span>筛选字段</span>
          <el-dropdown-menu slot="dropdown">
            <el-scrollbar style="height:60vh;">
              <el-dropdown-item>
                <el-checkbox label="全选" :checked="checkAll" :indeterminate="!checkAll" @change="handleCheckAllChange">全选</el-checkbox>
              </el-dropdown-item>
              <el-checkbox-group v-model="allCheckedCols">
                <el-dropdown-item v-for="column in bindTableColumns" :key="column.label">
                  <el-checkbox :label="column.prop" :disabled="column.disabled">{{ column.label }}</el-checkbox>
                </el-dropdown-item>
              </el-checkbox-group>
            </el-scrollbar>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <!--列表-->
    <div>
      <el-table
        :data="data"
        :border="true"
        :header-cell-class-name="$style.tableHeaderCell"
        :cell-class-name="$style.tableCell"
        v-loading="loading"
        tooltip-effect="dark"
        style="width: 100%;font-size: 12px;"
        max-height="600"
        ref="goodsTable"
        size="mini"
      >
        <el-table-column type="selection" align="center" width="40" fixed :selectable="row => row.status === 'RECHECK'"></el-table-column>
        <el-table-column
          v-for="item in checkedTableColumns"
          align="center"
          :key="item.prop + '-' + item.index"
          :prop="item.prop"
          :label="item.label"
          :min-width="item.minWidth"
          :show-overflow-tooltip="item.showTooltip"
        >
          <template slot-scope="scope">
            <div v-if="item.prop === 'isCf'">
              {{ scope.row.isCf === 'Y' ? '是' : '否' }}
            </div>
            <div v-else-if="item.prop === 'isMarketing'">
              {{ scope.row.isMarketing === 'Y' ? '是' : '否' }}
            </div>
            <div v-else-if="item.prop === 'status'">
              <span :style="{ color: scope.row.status === 'REJECTED' || scope.row.status === 'REBUT' ? 'red' : 'inherit' }">
                {{ formatStatusText(scope.row.status) }}
              </span>
            </div>
            <div v-else-if="item.prop === 'remark'">
              <span :style="{ color: scope.row.status === 'REJECTED' || scope.row.status === 'REBUT' ? 'red' : 'inherit' }">
                {{ scope.row[item.prop] }}
              </span>
            </div>
            <div v-else>
              {{ scope.row[item.prop] }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div :class="$style.tablePagination">
        <el-pagination
          @size-change="onPageSizeChange"
          @current-change="onPageNumChange"
          :current-page="currentPage"
          :page-sizes="[100, 200]"
          :page-size="pageSize"
          layout="total, prev, pager, next, sizes"
          :total="total"
        />
      </div>
    </div>
    <!--批量审核弹窗-->
    <el-dialog
      title="审核意见"
      :visible="visible"
      width="50%"
      :custom-class="$style.auditDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      @close="onClose"
    >
      <el-form :model="formModel" size="mini">
        <el-form-item label="">
          <el-input
            type="textarea"
            :rows="4"
            v-model="formModel.remark"
            placeholder="请填写不超过50字的审核意见"
            clearable
            :maxlength="50"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="onAudit('SUCCESS')" :loading="successLoading" type="success" size="mini">审核通过</el-button>
        <el-button @click="onAudit('REBUT')" :loading="rebutLoading" type="danger" size="mini">复审驳回</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss" module>
@import './index.module.scss';
</style>

<script>
import Index from './index';
export default Index;
</script>
